<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>日箱量统计表</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole">
      <a-row>
        <a-col :span="24">
          <a-form layout="inline">
            <a-form-item label="选择日期">
              <a-range-picker :value="timeValue" @change="onDateChange">
                <a-icon slot="suffixIcon" type="calendar" />
              </a-range-picker>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" @click="handleSubmit1">查询</a-button>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="exportExcel">导出Excel</a-button>
            </a-form-item>
          </a-form>

          <a-table
            :loading="loading"
            :columns="columns"
            :data-source="tableData"
            class="tableMargin"
            :pagination="pagination"
            :row-key="(record,index) => index"
          >
            <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
            <template slot="operation" slot-scope="text, record">
              <a @click="viewIt(record.searchDay)">查看</a>
              <a @click="exportIt(record.searchDay)">导出</a>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </div>
    <a-modal
      :visible="visible"
      title="详情"
      @cancel="handleCancel"
      :footer="null"
      :width="1250"
      centered
    >
      <div class="sale_xltj" v-if="detailList.length > 0">
        <h1>{{searchDay.split('-')[1]}}月{{searchDay.split('-')[2]}}号日箱量统计报表</h1>
        <table width="100%" border="0">
          <tr>
            <td rowspan="2">市场部</td>
            <td rowspan="2">姓名</td>
            <td colspan="4">{{searchDay.split('-')[1]}}月</td>
            <td colspan="3">{{searchDay.split('-')[1]}}月{{searchDay.split('-')[2]}}日</td>
            <td>{{searchDay.split('-')[1]}}月{{(Number(searchDay.split('-')[2])+1) > 9 ? `${(Number(searchDay.split('-')[2])+1).toFixed(0)}` : `0${(Number(searchDay.split('-')[2])+1).toFixed(0)}`}}日</td>
          </tr>
          <tr>
            <td>指标箱量</td>
            <td>合计完成</td>
            <td>出口实际装箱量</td>
            <td>进口实际装箱量</td>
            <td>合计完成</td>
            <td>出口实际装箱量</td>
            <td>进口实际装箱量</td>
            <td>出口计划装箱量</td>
          </tr>
          <template v-for="(item, i) in detailList">
            <tr v-for="(v, k) in item.itemList" :key="Math.random(k)">
              <td v-if="k === 0" :rowspan="item.itemList.length">{{item.department}}</td>
              <td>{{v.seller}}</td>
              <td>{{v.totalQuantityByExamine}}</td>
              <td>{{v.totalQuantityByMonth}}</td>
              <td>{{v.exportQuantityByMonth}}</td>
              <td>{{v.importQuantityByMonth}}</td>
              <td>{{v.totalQuantityByDay}}</td>
              <td>{{v.importQuantityByDay}}</td>
              <td>{{v.exportQuantityByDay}}</td>
              <td>{{v.exportQuantityByTomorrow}}</td>
            </tr>
            <tr :key="Math.random(i)">
              <td colspan="2">合计</td>
              <td>{{item.totalQuantityByExamine}}</td>
              <td>{{item.totalQuantityByMonth}}</td>
              <td>{{item.exportQuantityByMonth}}</td>
              <td>{{item.importQuantityByMonth}}</td>
              <td>{{item.totalQuantityByDay}}</td>
              <td>{{item.importQuantityByDay}}</td>
              <td>{{item.exportQuantityByDay}}</td>
              <td>{{item.exportQuantityByTomorrow}}</td>
            </tr>
          </template>
          <tr>
            <td colspan="2">合计</td>
            <td>{{totalObj.totalQuantityByExamine.toFixed(0)}}</td>
            <td>{{totalObj.totalQuantityByMonth.toFixed(0)}}</td>
            <td>{{totalObj.exportQuantityByMonth.toFixed(0)}}</td>
            <td>{{totalObj.importQuantityByMonth.toFixed(0)}}</td>
            <td>{{totalObj.totalQuantityByDay.toFixed(0)}}</td>
            <td>{{totalObj.importQuantityByDay.toFixed(0)}}</td>
            <td>{{totalObj.exportQuantityByDay.toFixed(0)}}</td>
            <td>{{totalObj.exportQuantityByTomorrow.toFixed(0)}}</td>
          </tr>
        </table>
      </div>
      <a-empty v-else />
    </a-modal>
  </div>
</template>

<script>
import { queryDailyContainerAnalysisList, queryDailyContainerAnalysisDetailList } from '@/api/salesCenter'
import { commonExport } from '@/api/request'

export default {
  data () {
    const columns = [
      {
        title: '序号',
        width: 60,
        scopedSlots: { customRender: 'rn' }
      },
      {
        title: '日期',
        dataIndex: 'searchDay',
        width: 120
      },
      {
        title: '月指标箱量（个）',
        dataIndex: 'totalQuantityByExamine'
      },
      {
        title: '本月累计完成箱量（个）',
        dataIndex: 'totalQuantityByMonth'
      },
      {
        title: '本月累计完成出口箱量（个）',
        dataIndex: 'exportQuantityByMonth'
      },
      {
        title: '本月累计完成进口箱量（个）',
        dataIndex: 'importQuantityByMonth'
      },
      {
        title: '今日合计完成箱量（个）',
        dataIndex: 'totalQuantityByDay'
      },
      {
        title: '今日合计完成进口箱量（个）',
        dataIndex: 'importQuantityByDay'
      },
      {
        title: '今日合计完成出口箱量（个）',
        dataIndex: 'exportQuantityByDay'
      },
      {
        title: '明日计划出口箱量（个）',
        dataIndex: 'exportQuantityByTomorrow'
      },
      {
        title: '操作',
        width: 100,
        scopedSlots: { customRender: 'operation' }
      }
    ]
    return {
      loading: false,
      searchForm: {
        startDate: '', // 开始时间
        endDate: '' // 结束时间
      },
      columns,
      tableData: [],
      pagination: {},
      pageNum: 1,
      pageSize: 10,
      visible: false,
      timeValue: [],
      detailList: [],
      searchDay: '',
      totalObj: {}
    }
  },
  methods: {
    detailListRequest (e) {
      queryDailyContainerAnalysisDetailList(e).then(res => {
        this.visible = true
        let detailList = res.data
        this.detailList = detailList
        let totalObj = {
          totalQuantityByExamine: 0,
          totalQuantityByMonth: 0,
          exportQuantityByMonth: 0,
          importQuantityByMonth: 0,
          totalQuantityByDay: 0,
          importQuantityByDay: 0,
          exportQuantityByDay: 0,
          exportQuantityByTomorrow: 0
        }
        detailList.forEach(v => {
          totalObj.totalQuantityByExamine += v.totalQuantityByExamine
          totalObj.totalQuantityByMonth += v.totalQuantityByMonth
          totalObj.exportQuantityByMonth += v.exportQuantityByMonth
          totalObj.importQuantityByMonth += v.importQuantityByMonth
          totalObj.totalQuantityByDay += v.totalQuantityByDay
          totalObj.importQuantityByDay += v.importQuantityByDay
          totalObj.exportQuantityByDay += v.exportQuantityByDay
          totalObj.exportQuantityByTomorrow += v.exportQuantityByTomorrow
        })
        this.totalObj = totalObj
      })
    },
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      this.loading = true
      queryDailyContainerAnalysisList({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
        .then(rsp => {
          this.isFirstEnd = false
          this.loading = false
          this.tableData = rsp.data.list
          this.pagination = {
            current: this.pageNum,
            pageSize: rsp.data.pageSize,
            total: rsp.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              this.handleSubmit()
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              this.handleSubmit()
            }
          }
        }).catch(() => {
          this.loading = false
        })
    },
    onDateChange (date, dataStr) {
      this.timeValue = date
      this.searchForm.startDate = dataStr[0]
      this.searchForm.endDate = dataStr[1]
    },
    exportExcel () {
      commonExport('/sales/exportDailyContainerAnalysisList', {
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: this.columns
      })
    },
    viewIt (searchDay) {
      // console.log(searchDay)
      this.searchDay = searchDay
      this.detailListRequest({
        searchDay: searchDay
      })
    },
    exportIt (searchDay) {
      commonExport('/sales/exportDailyContainerAnalysisDetailList', {
        searchDay: searchDay
      })
    },
    handleCancel () {
      this.visible = false
    }
  },
  mounted () {
    this.handleSubmit1()
  }
}
</script>
<style>
.sale_xltj {
  width: 1160px;
  margin: 20px;
}
.sale_xltj h1 {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 18px;
}
.sale_xltj table {
  border-collapse: collapse;
}
.sale_xltj table tr td {
  text-align: center;
  padding: 8px 0;
  border: 1px solid #d9d9d9;
}
</style>
